<!--
 * @Author: wwssaabb
 * @Date: 2021-06-05 16:36:56
 * @LastEditTime: 2021-06-07 17:39:19
 * @FilePath: \demo\echarts_demo\map_demo.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>map_demo</title>
  <script src="./lib/echarts.min.js"></script>
  <script src="./lib/jquery.min.js"></script>
  <script src="./theme/myTheme.js"></script>
  <style>
    *{
      margin:0;
      padding:0;
      user-select: none;
    }
    body{
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container{
      width: 45vw;
      height: 45vw;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #d8d8d8;
      box-shadow: 0 0 10px #d8d8d8;
    }
  </style>
</head>
<body>
  <div class="container"></div>

  <script type="text/javascript">
    var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 }
    ]
    var scatterData = [
      {
        value: [113.280637, 23.125178]
      }
    ]
    const mCharts=echarts.init(document.querySelector('.container'))
    mCharts.showLoading()
    $.get('./json/map/china.json',function(res){
      mCharts.hideLoading()

      console.log(res)
      echarts.registerMap('chinaMap',res)
      var option={
        geo:{
          type:'map',
          map:'chinaMap',
          roam:true,
          label:{
            show:true,
          },
          zoom:1,
          
        },
        series:[
          {
            data:airData,
            type:'map',
            geoIndex:0
          },
          {
            type:'effectScatter',
            data:scatterData,
            coordinateSystem:'geo',
            rippleEffect:{
              scale:10,
              color:'red'
            }
          }
        ],
        visualMap:{
          min:Math.min(...airData.map(i=>i.value)),
          max:Math.max(...airData.map(i=>i.value)),
          inRange:{
            color:['white','red']
          },
          calculable:true
        },
        
        
      }
      mCharts.setOption(option)
    })

    /* window.onresize=function(){
      console.log('onresize')
      mCharts.resize()
    } */
    //简写
    window.onresize=mCharts.resize
  
  
  </script>
</body>
</html>